<template>
  <view class="container">
    <!-- 页面头部标题 -->
    <view class="new-page-header">
      <!-- 状态栏占位 -->
      <view class="new-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
      <!-- 导航栏 -->
      <view class="new-nav-bar" :style="{ height: navBarHeight + 'px' }">
        <!-- 返回按钮 -->
        <view class="new-back-button" @click="goBack">
          <u-icon name="arrow-left" size="36" color="#ffffff"></u-icon>
        </view>
        <!-- 标题 -->
        <view class="new-header-title" :style="{ lineHeight: navBarHeight + 'px' }">资金明细</view>
      </view>
    </view>

    <!-- 页面内容 -->
    <view class="page-content">
      <!-- 资金记录列表 -->
      <view class="balance-list">
        <view 
          v-for="(item, index) in balanceList" 
          :key="index" 
          class="balance-item"
        >
          <!-- 上半部分：账户类型和时间 -->
          <view class="item-header">
            <view class="transaction-type">{{ item.type }}</view>
            <view class="transaction-time">{{ item.time }}</view>
          </view>
          
          <!-- 分隔线 -->
          <view class="divider"></view>
          
          <!-- 下半部分：金额+操作类型和状态 -->
          <view class="item-content">
            <view class="amount-section">
              <view class="transaction-amount">{{ item.amount }}</view>
              <view class="transaction-operation">{{ item.operation }}</view>
            </view>
            <view class="transaction-status" :class="{
              'status-success': item.status === '退款成功' || item.status === '充值成功' || item.status === '提现成功',
              'status-pending': item.status === '审核中',
              'status-failed': item.status === '提现失败',
              'status-default': item.status !== '退款成功' && item.status !== '充值成功' && item.status !== '提现成功' && item.status !== '审核中' && item.status !== '提现失败'
            }">
              {{ item.status }}
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="balanceList.length === 0" class="empty-state">
        <u-icon name="file-text" size="120" color="#cccccc"></u-icon>
        <text class="empty-text">暂无资金记录</text>
      </view>
    </view>
  </view>
</template>

<script>
import navbarMixin from '@/common/mixin/navbar.js'

export default {
  mixins: [navbarMixin],
  
  data() {
    return {
      // 资金记录列表
      balanceList: [
        {
          type: '微信零钱',
          time: '2020-4-12 16:12:41',
          amount: '300.00',
          operation: '退款金额(元)',
          status: '退款成功'
        },
        {
          type: '微信零钱',
          time: '2020-4-12 16:12:41',
          amount: '300.00',
          operation: '充值金额(元)',
          status: '充值成功'
        },
        {
          type: '微信零钱',
          time: '2020-4-12 16:12:41',
          amount: '300.00',
          operation: '提现金额(元)',
          status: '审核中'
        },
        {
          type: '微信零钱',
          time: '2020-4-12 16:12:41',
          amount: '300.00',
          operation: '提现金额(元)',
          status: '提现成功'
        },
        {
          type: '微信零钱',
          time: '2020-4-12 16:12:41',
          amount: '300.00',
          operation: '提现金额(元)',
          status: '提现失败'
        }
      ]
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 加载资金记录
    this.loadBalanceList()
  },

  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },

    /**
     * 加载资金记录
     */
    loadBalanceList() {
      // 这里可以调用API获取真实数据
      // 现在使用模拟数据
      console.log('加载资金记录...')
    }
  },

  /**
   * 分享当前页面
   */
  onShareAppMessage() {
    return {
      title: '资金明细',
      path: "/pages/newbalance/index"
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f9fa;
}

.page-content {
  padding-bottom: 120rpx;
}

.balance-list {
  padding: 30rpx;
  
  .balance-item {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    
    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .transaction-type {
        font-size: 28rpx;
        color: #333333;
      }
      
      .transaction-time {
        font-size: 24rpx;
        color: #999999;
      }
    }
    
    .divider {
      height: 1rpx;
      background: #f5f5f5;
      margin-bottom: 20rpx;
    }
    
    .item-content {
      display: flex;
      justify-content: space-between;
      align-items: center; /* 确保上下对齐 */
      
      .amount-section {
        flex: 1;
        display: flex;
        flex-direction: column; /* 让金额和操作在垂直方向排列 */
        
        .transaction-amount {
          font-size: 32rpx;
          font-weight: 600;
          color: #333333;
          margin-bottom: 8rpx;
          margin-left: 10rpx;
        }
        
        .transaction-operation {
          font-size: 24rpx;
          color: #999999;
        }
      }
      
      .transaction-status {
        font-size: 42rpx;
        text-align: right;
        display: flex;
        align-items: center; /* 垂直居中 */
        
        &.status-success {
          color:rgb(6, 222, 67);
        }
        
        &.status-pending {
          color: #fdcb6e;
        }
        
        &.status-failed {
          color: #e17055;
        }
        
        &.status-default {
          color: #74b9ff;
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;
  
  .empty-text {
    font-size: 28rpx;
    color: #999999;
    margin-top: 30rpx;
  }
}
</style> 